<template>
  <el-card>
    <my-table :columns="columns" :dataSource="dataSource">
      <template #method="{ index }">
        <el-select
          :options="method_options"
          v-model="dataSource[index].method"
          placeholder="待选择"
        ></el-select>
      </template>
      <template #value="{ index }">
        <el-input v-model="dataSource[index].value" placeholder="待填写"></el-input>
      </template>
      <template #text="{ index }">
        <el-input v-model="dataSource[index].text" placeholder="待填写"></el-input>
      </template>
      <template #notes="{ column, record, text, index }">
        <el-input v-model="dataSource[index].notes" placeholder="待填写"></el-input>
      </template>

      <template #action="{ index }" class="action">
        <el-link
          ><el-icon><CirclePlusFilled /></el-icon
        ></el-link>
        <el-link
          ><el-icon><RemoveFilled /></el-icon
        ></el-link>
        <el-link
          ><el-icon><ArrowUpBold /></el-icon
        ></el-link>
        <el-link
          ><el-icon><ArrowDownBold /></el-icon
        ></el-link>
      </template>
    </my-table>
  </el-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import myTable from "./myTable.vue";

const method_options = [
  {
    label: "访问",
    value: "访问",
  },
  {
    label: "点击",
    value: "点击",
  },
  {
    label: "输入",
    value: "输入",
  },
  {
    label: "断言",
    value: "断言",
  },
];

/* 通过作用域插槽传递以下4个参数供使用

        column：表头

        record：当前行数据

        text：当前单元格数据

        index：当前行索引

若要自定义某一列的元素，在column中的对应列名下加上scopeVal: true
 */

const columns = reactive([
  {
    label: "方法",
    prop: "method",
    scopeVal: true,
  },
  {
    label: "元素定位",
    prop: "value",
    scopeVal: true,
  },
  {
    label: "输入",
    prop: "text",
    scopeVal: true,
  },
  {
    label: "备注",
    prop: "notes",
    scopeVal: true,
  },
  {
    label: "状态",
    prop: "status",
  },
  {
    label: "操作",
    prop: "action",
    scopeVal: true,
  },
]);

let dataSource = reactive([
  {
    method: "访问",
    value: "",
    text: "http://www.baidu.com",
    notes: "访问百度",
    status: "待运行",
  },
  {
    method: "点击",
    value: "//*[@id=kw]",
    text: "",
    notes: "点击搜索框",
    status: "待运行",
  },
]);
</script>
